<!--
 * @Descripttion: 
 * @Author: voanit

 * @Date: 2022-04-04 11:22:23
 * @LastEditors: voanit
 * @LastEditTime: 2022-04-04 16:57:19
-->
<template>
  <div class="role-container">
    <el-button type="primary" @click="addHandle">新增角色</el-button>
    <el-table :data="tableData" style="width: 100%" border stripe>
      <el-table-column align="center" label="序号" width="80" type="index">
      </el-table-column>
      <el-table-column
        align="center"
        label="角色"
        prop="name"
      ></el-table-column>
      <el-table-column
        align="center"
        label="描述"
        prop="description"
      ></el-table-column>
      <el-table-column align="center" label="描述">
        <template slot-scope="scope">{{ scope.row.description }} </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            >分配权限</el-button
          >
          <el-button type="primary" size="mini" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin: 20px; text-align: right"
      :page-sizes="[2, 4, 6, 8]"
      :current-page="queryObj.page"
      :page-size="queryObj.pagesize"
      layout="sizes,prev, pager, next,jumper,total"
      :total="total"
      background
    >
    </el-pagination>

    <!-- 角色编辑和添加对话框 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <roleDig
        v-if="dialogFormVisible"
        @success="success"
        :dialogFormVisible.sync="dialogFormVisible"
        :is-edit="isEdit"
        :row="row"
      ></roleDig>
    </el-dialog>
  </div>
</template>
<script>
import roleDig from "./roleDig.vue";
import { getRoles, deleteRole } from "@/api/setting.js";
export default {
  name: "",
  components: {
    roleDig,
  },
  data() {
    return {
      tableData: [],
      total: 0,
      queryObj: {
        page: 1,
        pagesize: 2,
      },
      dialogFormVisible: false,
      isEdit: false,
      row: {},
    };
  },
  created() {
    this.getRoleList();
  },
  computed: {},
  methods: {
    /* 分页 */
    handleSizeChange(val) {
      /* 设置每一页显示多少条 */
      console.log(`每页 ${val} 条`);
      this.queryObj.pagesize = val;
      /* 重新获取数据 */
      this.getRoleList();
    },
    handleCurrentChange(val) {
      // 获取当前页码数
      console.log(`当前页: ${val}`);
      this.queryObj.page = val;
      /* 重新获取数据 */
      this.getRoleList();
    },
    /* /分页 */

    handleDelete(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // 点击确认按钮
          console.log(id);
          const res = await deleteRole(id);
          /* 重新获取数据 */
          this.getRoleList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          /* 点击的取消按钮 */
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /* getRoleList() 获取角色列表 */
    async getRoleList() {
      const res = await getRoles(this.queryObj);
      console.log(res, 8);
      this.tableData = res.data.rows;
      /* 获取total */
      this.total = res.data.total;
    },
    /* 编辑 */
    handleEdit(row) {
      this.dialogFormVisible = true;
      console.log(row);
      this.isEdit = true;
      this.row = row;
    },
    /* 添加 */
    addHandle() {
      /* 
      步骤分析：
      1-点击按钮===显示对话框
      2-抽离对话框中的表单到roleDio.vue组件中====组件是显示在对话框中的
      3-表单结构布局+校验
      4-判断表单是否需要显示数据====添加角色和编辑角色公用一个对话框
        4-1 定义isEdit:false
        4-2 点击添加 isEdit:false===添加角色
          4-2-1 发送添加角色请求
        4-3 点击编辑 isEdit:true===编辑角色
          4-3-1 获取当前点击行的数据
          4-3-2 根据isEdit判断为true渲染数据到表单中
          4-3-3 发送编辑角色请求
      5-对话框标题设置
      6-对话框关闭
        6-1 操作了添加或者编辑 需要重新获取列表数据 ===关闭对话框
        6-2 点击对话框取消按钮 ===关闭对话框
      */
      this.dialogFormVisible = true;
      /* 添加角色 */
      this.isEdit = false;
    },
    success() {
      this.dialogFormVisible = false;
      this.getRoleList();
    },
  },
};
</script>
<style lang="scss" scoped>
.role-container {
  // .el-table thead th {
  //   text-align: center;
  // }
}
</style>
